<template>
  <div>
    <div id="thecore1">
      <el-carousel trigger="click" height="10.625rem">
        <el-carousel-item v-for="item in thepicture" :key="item.id">
          <!-- <h3 class="small">{{ item }}</h3> -->
          <img alt="" :src="item.url" class="thecore2" />
        </el-carousel-item>
      </el-carousel>
      <div class="thecore3">
        <div class="thecore4">
          <div class="thecore4one">为企业物联提供数字化解决方案</div>
          <div class="thecore4two">CORE STRENGTHS</div>
          <!-- baoqialai -->
          <div>
            <div class="thecore5">
              <div class="thecore6">
                <span class="thecore7">监控显示类</span>
                <img src="@/assets/hompageimg/监控显示类.png" class="thecore8" />
              </div>
              <div class="thecore9">
                <div class="thecore10"></div>
                <span class="thecore11">支持PC,手机的远程展示,现场触控屏展示和LED大屏展示等</span>
                <ul class="thecore12">
                  <li>• 参数卡片</li>
                  <li>• 画面组态</li>
                  <li>• 3D 场景</li>
                  <li>• 大数据展示</li>
                </ul>
                <div class="thecore13">查看详情</div>
              </div>
            </div>
            <!-- 逻辑控制类 -->
            <div class="thecore5">
              <div class="thecore6">
                <span class="thecore7">逻辑控制类</span>
                <img src="@/assets/hompageimg/逻辑控制类.png" class="thecore8" />
              </div>
              <div class="thecore9">
                <div class="thecore10"></div>
                <span class="thecore11">用于控制接入系统的各种设备</span>
                <ul class="thecore12">
                  <li>• 状态控制</li>
                  <li>• 数值控制</li>
                  <li>• 自动控制</li>
                  <li>• 连锁控制</li>
                </ul>
                <div class="thecore13">查看详情</div>
              </div>
            </div>
            <!--报警预警类  -->
            <div class="thecore5">
              <div class="thecore6">
                <span class="thecore7">报警预警类</span>
                <img src="@/assets/hompageimg/报警预警类.png" class="thecore8" />
              </div>
              <div class="thecore9">
                <div class="thecore10"></div>
                <span class="thecore11">检测、分析各类异常数据</span>
                <ul class="thecore12">
                  <li>• 报警设置</li>
                  <li>• 报警记录</li>
                  <li>• 报警功能</li>
                  <li>• 报警原因</li>
                </ul>
                <div class="thecore13">查看详情</div>
              </div>
            </div>
            <!-- 数据报表类 -->
            <div class="thecore5">
              <div class="thecore6">
                <span class="thecore7">数据报表类</span>
                <img src="@/assets/hompageimg/数据报表类.png" class="thecore8" />
              </div>
              <div class="thecore9">
                <div class="thecore10"></div>
                <span class="thecore11">用于分析系统中集成的各种信息</span>
                <ul class="thecore12">
                  <li>• 数据图表</li>
                  <li>• 历史数据</li>
                  <li>• 事故追忆</li>
                  <li>• 自定义表单</li>
                </ul>
                <div class="thecore13">查看详情</div>
              </div>
            </div>
            <!-- 智慧管理类 -->
            <div class="thecore5">
              <div class="thecore6">
                <span class="thecore7">智慧管理类</span>
                <img src="@/assets/hompageimg/智慧管理类.png" class="thecore8" />
              </div>
              <div class="thecore9">
                <div class="thecore10"></div>
                <span class="thecore11">管理类功能用于辅助各种企业 管理工作。</span>
                <ul class="thecore12">
                  <li>• 任务管理</li>
                  <li>• 溯源管理</li>
                  <li>• 巡检管理</li>
                  <li>• 知识库</li>
                </ul>
                <div class="thecore13">查看详情</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="thecore14">
        <div class="thecore15">
          <div class="thecore16">
            <div class="thecore17">核心优势</div>
            <div class="thecore18">CORE STRENGTHS</div>
            <!-- class="thecore19" -->
            <div class="thecore19">
              <div
                class="thecore20"
                v-for="(items, index) in coreAdvantagePicture"
                :key="index"
                @click="imglist(index)"
                :class="{ action: action === index }"
              >
                <img :src="items.url" class="thecore21" alt="" />
              </div>
            </div>
            <div class="thecore26">
              <el-tabs v-model="activeName">
                <el-tab-pane label="自由组态" name="first">
                  <div class="thecore26one">
                    <div class="thecore27">
                      <img src="@/assets/hompageimg/功能模板2.png" class="thecore27" alt="" />
                    </div>
                    <div class="thecore28">
                      <div class="thecore29"></div>
                      <span class="thecore30">自由组态</span>
                      <div class="thecore31">提供上百种功能模块和组件</div>
                      <div class="thecore32">依托云端组态技术,随时随地享受场景组态新体验</div>
                      <div class="thecore33">场景组件丰富,自由拖拽搭建</div>
                      <div class="thecore34">数据,动画实时展示,监控更直观；模板搭建更快速</div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="功能模板" name="second">
                  <div class="thecore26one">
                    <div class="thecore27">
                      <img src="@/assets/hompageimg/功能模板2.png" class="thecore27" alt="" />
                    </div>
                    <div class="thecore28">
                      <div class="thecore29"></div>
                      <span class="thecore30">功能模板</span>
                      <div class="thecore31">用户通过此模板可直接复制系统,包括模板内的菜单,功能等信息</div>
                      <div class="thecore32">复制此模板可以快速复制数据展示界面及各种组件</div>
                      <div class="thecore33">用户只需使用模板就能快速创建系统,调整数据源即可使用</div>
                      <div class="thecore34">无需编码,自动获取设备数据,直接通过组件拖拽,实现界面布局</div>
                    </div>
                  </div></el-tab-pane
                >
                <el-tab-pane label="大数据展示" name="third">
                  <div class="thecore26one">
                    <div class="thecore27">
                      <img src="@/assets/hompageimg/功能模板2.png" class="thecore27" alt="" />
                    </div>
                    <div class="thecore28">
                      <div class="thecore29"></div>
                      <span class="thecore30">大数据展示</span>
                      <div class="thecore31">一站式多维数据可视化展示界面</div>
                      <div class="thecore32">可以将设备上传的各种数据或其他系统中的数据实时展示在屏幕上</div>
                      <div class="thecore33">数据展示界面采用Web组件渲染,无需额外安装软件</div>
                      <div class="thecore34">无需编码,自动获取设备数据,直接通过组件拖拽,实现界面布局</div>
                    </div>
                  </div></el-tab-pane
                >
                <el-tab-pane label="开放对接" name="fourth">
                  <div class="thecore26one">
                    <div class="thecore27">
                      <img src="@/assets/hompageimg/功能模板2.png" class="thecore27" alt="" />
                    </div>
                    <div class="thecore28">
                      <div class="thecore29"></div>
                      <span class="thecore30">开放对接</span>
                      <div class="thecore31">提供上百种功能模块和组件</div>
                      <div class="thecore32">支持第三方开发软件驱动程序,服务与云平台对接</div>
                      <div class="thecore33">支持用户自定义驱动,无需编程,创建设备驱动实现对接</div>
                      <div class="thecore34">易云系统都能最大限度满足您的设备对接需求</div>
                    </div>
                  </div></el-tab-pane
                >
              </el-tabs>
            </div>
            <!-- <el-tabs v-model="activeName">
              <el-tab-pane v-for="(items, index) in coreAdvantagePicture" :key="index" >
              </el-tab-pane>
            </el-tabs> -->
          </div>
        </div>
      </div>
      <div class="thecore35">
        <div class="thecore36">解决方案</div>
        <div class="thecore37">提供多个行业的通用高质量解决方案</div>
        <div class="thecore38">
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案1.png" class="thecore40" alt="" />
            <div class="thecore41">燃气设备智能管理方案</div>
          </div>
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案2.png" class="thecore40" alt="" />
            <div class="thecore42">工业自动化上云解决方案</div>
          </div>
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案3.png" class="thecore40" alt="" />
            <div class="thecore41">建筑隧道智能监测系统</div>
          </div>
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案4.png" class="thecore40" alt="" />
            <div class="thecore43">供暖换热站远程监控解决方案</div>
          </div>
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案5.png" class="thecore40" alt="" />
            <div class="thecore44">智慧楼宇管理系统</div>
          </div>
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案6.png" class="thecore40" alt="" />
            <div class="thecore44">空调远程监测方案</div>
          </div>
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案7.png" class="thecore40" alt="" />
            <div class="thecore45">城市供水无线调度解决方案</div>
          </div>
          <div class="thecore39">
            <img src="@/assets/hompageimg/解决方案8.png" class="thecore40" alt="" />
            <div class="thecore41">供水设备远程运维系统</div>
          </div>
        </div>
      </div>
      <div class="thecore46">
        <div class="thecore47">合作伙伴</div>
        <div class="thecore48">CORE STRENGTHS</div>
        <div class="thecore49">
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴1.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴2.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴3.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴4.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴5.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴6.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴7.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴8.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴9.png" class="thecore51" alt="" />
            </div>
          </div>
          <div class="thecore50">
            <div class="thecore51">
              <img src="@/assets/hompageimg/合作伙伴10.png" class="thecore51" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="thecore52">
        <span class="thecore53">快速集成项目和应用开发</span>
      </div>
      <!-- <div class="thecore54">
        <div class="thecore55">Copyrighting@2016-2022 南京罗斯蒙德网络科技有限公司版权所有</div>
        <div class="thecore56">南京罗斯蒙德网络科技有限公司&nbsp;&nbsp;&nbsp;苏ICP备20220222号</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import "@/store/flexible";
import "@/assets/styles/index.css";
export default {
  data() {
    return {
      activeName: "first",
      // thepicture: [
      //   { url: require("@/assets/hompageimg/首页2.png"), id: 0 },
      //   { url: require("@/assets/hompageimg/首页1.png"), id: 1 },
      //   { url: require("@/assets/hompageimg/首页3.png"), id: 2 },
      //   { url: require("@/assets/hompageimg/首页4.png"), id: 3 },
      // ],
      coreAdvantagePicture: [
        { url: require("@/assets/hompageimg/自由组态.png"), id: 0 },
        { url: require("@/assets/hompageimg/功能模板.png"), id: 1 },
        { url: require("@/assets/hompageimg/大数据展示.png"), id: 2 },
        { url: require("@/assets/hompageimg/开放对接.png"), id: 3 },
      ],
      // coreAdvantagePicturelist: [{ one1: "自由组态" }, { one2: "功能模板" }, { one3: "大数据展示" }, { one4: "开放对接" }],
      action: "",
    };
  },
  created() {
    // console.log(this.coreAdvantagePicture, "coreAdvantagePicture");
    // console.log(this.thepicture);
  },
  mounted() {},
  methods: {
    imglist(index) {
      this.action = index;
    },
  },
};
</script>

<style scoped>
/* ::v-deep .el-tabs__nav-wrap::after {
  background-color: #f0f2f5 !important;
  padding-bottom: 0.25rem;
} */
/* ::v-deep .el-tabs__item {
  color: #ffffff !important;
} */
::v-deep .el-tabs__nav {
  width: 15rem;
  border-bottom: 2px solid #eeeeee !important;
}
/* ::v-deep .el-tabs__nav-wrap::after {
  background-color: #eeeeee !important;
} */
::v-deep .el-tabs__item {
  font-size: 0.25rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85) !important;
  line-height: 0.325rem;
  width: 3.75rem;
  /* border-bottom: 2px solid #eeeeee !important; */
  /* margin-left: .75rem; */
}
/* ::v-deep .el-tabs__nav {
  width: 3.75rem;
} */
::v-deep .el-tabs__nav-wrap::after {
  width: 15rem;
  /* background-color: #eeeeee !important; */
  /* border-bottom: 2px solid #ffffff !important; */
}
::v-deep .el-tabs__item:nth-child(2) {
  margin-left: 1.3125rem;
  /* padding-right: -1.3125rem; */
  /* border-bottom: 2px solid #eeeeee !important; */
  width: 3.75rem;
}
::v-deep .el-tabs__item:nth-child(3) {
  margin-left: -0.125rem;
  /* padding-left: -1rem !important; */
  /* border-bottom: 2px solid #eeeeee !important; */
  width: 3.75rem;
}
::v-deep .el-tabs__active-bar {
  bottom: 0rem !important;
  width: 3.75rem !important;
  /* background-color: #eeeeee; */
}
</style>
